// @ts-nocheck
import React, { FC, useState } from 'react'
import style from '@/style/articles/articles.module.scss'
import Swiper from '@/components/articles/Swiper'
import Content from '@/components/articles/Content'
import Sell from '@/components/articles/Sell'
import Tags from '@/components/articles/Tags'
import Tab from '@/components/articles/Tab'
import TagClass from '@/components/articles/TagClass'
import { VerticalAlignTopOutlined } from '@ant-design/icons'
import { Outlet } from 'react-router-dom'

const Articles: FC = () => {
  // 返回顶部
  const btn: any = () => {
    // 设置定时器
    const timer = setInterval(() => {
      // 判断是否当前滚动条的位置 并且每10ms减100px
      if (document.documentElement.scrollTop !== 0) {
        document.documentElement.scrollTop -= 100
        // 回到顶部清除定时器
      } else {
        clearInterval(timer)
      }
    }, 10)
  }

  // 显示隐藏返回顶部
  const [tops, setTops] = useState(0)
  setInterval(() => {
    setTops(document.documentElement.scrollTop)
  }, 100)

  // 子父穿参
  const [n, setN] = useState(0)
  const change: any = (n) => {
    setN(n)
  }

  // 设置种子状态，并在渲染组件的 key 属性中使用它
  const [seed, setSeed] = useState(1)
  const [one, setone] = useState(1)
  const [two, settwo] = useState(1)
  const reset = (): any => {
    setSeed(Math.random())
    setone(Math.random())
    settwo(Math.random())
  }

  return (
    <div className={style.articles}>
      {n === 1 || n === -1 ? <Outlet key={n === 1 ? seed : two}/> : <Swiper /> }
      { n === -1 ? <TagClass change={change} reset={reset}/> : <Tab change={change} reset={reset}/> }
      <Content key={one}/>
      <Sell />
      <Tags change={change} reset={reset}/>
      <VerticalAlignTopOutlined
        style={
          tops > 100
            ? { opacity: 1 }
            : { opacity: 0 }
        }
        className={style.icon}
        onClick={() => {
          btn()
        }}
      />
    </div>
  )
}

export default Articles
